import React, { Component } from 'react'
import Header from "../../components/Header/Header"
import { Form, Input,Button,Toast } from 'antd-mobile'
import { reqregister } from '../../http/api'
import "./Register.less"


export default class Register extends Component {
  constructor(){
    super()
    this.state={
      user:{
        phone:"",
        nickname:"",
        password:"",
      }
    }
  }

  /* 绑定表单数据 */
  changeUser(e,key){
    this.setState({
      user:{
        ...this.state.user,
      [key]:e,
      }
    })
  }
  /* 点了注册 */
  register(){
    reqregister(this.state.user).then((res)=>{
      if(res.data.code === 200){
        /* 弹成功 */
        Toast.show({
          content:res.data.msg,
      })
      /* 跳转页面 */
      this.props.history.push("/login")
      }
    })
  }

  render() {
    return (
      <div className='register'>
        <Header text="注册" back></Header>

        {/* {JSON.stringify(this.state.user)} */}
         <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable
            onChange={e=>this.changeUser(e,"phone")} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable 
            onChange={e=>this.changeUser(e,"nickname")}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password'
            onChange={e=>this.changeUser(e,"password")} />
          </Form.Item>
          <Button block color='primary' size='large'
          onClick={()=>this.register()}>
          注册
        </Button>
        </Form>
      </div>
    )
  }
}
